<template>
    <div>
        <h4>图形的形状</h4>
        <div class="case-desc">
            <li>图形（symbol）指的是散点图中数据“点”的形状。有三类图形可选，一种是 ECharts 内置形状，第二种是图片，第三种是 SVG 的路径。</li>
            <li>ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用内置形状时，只要将 symbol 属性指定为形状名称对应的字符串即可。</li>
            <li>如果想要将图形指定为任意的图片，以 'image://' 开头，后面跟图片的绝对或相对地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。</li>
            <li>除此之外，还支持 SVG 的路径作为矢量图形，将 symbol 设置为以 'path://' 开头的 SVG 路径即可。使用矢量图形的好处是，图片不会因为缩放而产生锯齿或模糊，并且通常而言比图片形式的文件大小更小。路径的查看方法为，打开一个 SVG 文件，找到形如 <path d="M… L…"></path> 的路径，将 d 的值添加在 'path://' 后即可。</li>
        </div>
        <h4>图形的大小</h4>
        <div class="case-desc">
            <li>图形大小可以使用 series.symbolSize 控制。</li>
            <li>它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。</li>
            <li>除此之外，它还可以是一个回调函数，其参数格式为：(value: Array | number, params: Object) => number | Array;</li>
        </div>
        <div class="case-code-container">
            <div id="scatter-case-3" class="chart-container">

            </div>
            <highlightjs class="code" lang="js" :code="code"></highlightjs>
        </div>
    </div>
</template>

<script setup>
    import { code } from './code/case3.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    const svgpath = 'M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('scatter-case-3');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        // 绘制图表

        /** @type {echarts.EChartsOption} */
        const option = {
            title: { text: '散点图样式设置' },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            },
            yAxis: { type: 'value' },
            series: [
                {
                    name: '销量',
                    type: 'scatter',
                    data: [5, 20, 36, 10, 10, 20],
                    label: { show: true, position: 'top' },
                    // ★★★图形的形状
                    symbol: `path://${svgpath}`,
                    /** ★★★图形大小 */
                    symbolSize (value) {
                        return value;
                    },
                },
            ],
        };
        myChart.setOption(option);
    });
</script>

<style lang="scss" scoped>

</style>
